<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import { useRouter } from 'vue-router';
  import { ElMessage } from 'element-plus'
  import { Search } from '@element-plus/icons-vue';
  
  const input_value = ref('');
  const date1 = ref('');
  //可用可不用
  const handleInput = () => {
    console.log('input_value:',input_value.value);
  }
  const searchBtn = () => {
    console.log('date1:',date1.value);
    
    ElMessage.success('搜索成功');
  }

  // 模拟数据
  const tableData = ref([
    {
      id: 1,
      phone: '13812345678',
      name: '张三',
      email: 'zhangsan@example.com',
      date: '2024-12-01 10:00:00',
      status: 0
    },
    {
      id: 2,
      phone: '13987654321',
      name: '李四',
      email: 'lisi@example.com',
      date: '2024-12-02 14:30:00',
      status: 1
    },
    {
      id: 3,
      phone: '13654321876',
      name: '王五',
      email: 'wangwu@example.com',
      date: '2024-12-03 09:15:00',
      status: 2
    },
    {
      id: 4,
      phone: '13333333333',
      name: '赵六',
      email: 'zhaoliu@example.com',
      date: '2024-12-04 16:45:00',
      status: 0
    },
    {
      id: 5,
      phone: '13444444444',
      name: '孙七',
      email: 'sunqi@example.com',
      date: '2024-12-05 11:20:00',
      status: 1
    },
    
  ]);
  // 当前页码
  const currentPage = ref(1);
  // 每页显示数量
  const pageSize = ref(1);

  // 计算总页数
  const totalPage = ref(Math.ceil(tableData.value.length / pageSize.value));

  // 切换页码时的处理函数
  const handleCurrentChange = (page: number) => {
    currentPage.value = page;
    console.log('currentPage:',currentPage.value);
  };
  const router = useRouter();
  // 显示用户详情
  const showUserDetail = (row: any) => {
   
    console.log('row:',row);
    // 打开一个新的页面显示用户详情
    // 这里可以用路由的方式打开新的页面
    router.push({ name: 'user_detail', query: { id: row.id } });
  }
  onMounted(() => {
    console.log('mounted')
  });
</script>

<template>
  <div class="user-list">
    <!-- <h1>用户管理</h1> -->
    <div class="top-div">
      <el-input
      v-model="input_value"
      style="width: 400px;"
      placeholder="搜索" 
      :prefix-icon="Search" 
      @input="handleInput" >
      </el-input>
      <div class="top-div-right">
        <img class="top-div-right-img" src="@/assets/commons/Calculator.png" alt="logo" />
        
          <el-date-picker
            v-model="date1"
            type="month" 
            placeholder="注册日期" 
            format="YYYY-MM"
            value-format="YYYY-MM" />
          <el-button @click="searchBtn" type="primary">搜索</el-button>
        
      </div>
    </div>
    <div style="margin-top: 20px;">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="ID" width="150" />
        <el-table-column prop="phone" label="手机" width="120" />
        <el-table-column prop="name" label="用户" width="200" />
        <el-table-column prop="email" label="邮箱" width="200" />
        <el-table-column prop="date" label="时间" width="300" />
        <el-table-column prop="status" label="状态" width="300">
          <template #default="scope">
            <!-- 根据不同的status值显示不同的文本 -->
            <el-tag v-if="scope.row.status === 0" type="warning" >注册中</el-tag>
            <el-tag v-if="scope.row.status === 1"  type="success" >正常</el-tag>
            <el-tag v-if="scope.row.status === 2"  type="info" >冻结</el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" min-width="120">
          <template #default="scope">
            <el-button type="primary" size="small" @click="showUserDetail(scope.row)">
              查看详情
            </el-button>
            <!-- <el-button link type="primary" size="small">Edit</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        layout="total, prev, pager, next "
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<style scoped>
  .top-div {
    width:100%;
    /* height:100px; */
    background-color:#FFFFFF;
    display:flex;
    align-items:center;
    box-sizing: border-box;
    /* justify-content:space-between; */
    padding:20px 20px;
    flex-wrap:wrap;
  }
  .top-div-right {
    display:flex;
    align-items:center;
    margin-right: 20px;
    margin-left:200px;
  }
  .top-div-right-img {
    width:28px;
    height:30px;
    margin-right:70px;
  }
</style>